<template>
	<view class="star-wrap">
		<view
			:class="[
				`iconfontPT inline-block star ${
					item + 1 <= score ? 'iconshoucang-yixuanzhong checked' : `iconshoucang-yixuanzhong ${Math.ceil(score) === item + 1 ? 'star-special relative' : ''}`
				}`
			]"
			v-for="item in 5"
			:key="$u.guid()"
		>
			<text v-if="Math.ceil(score) === item + 1" class="iconfontPT iconshoucang-yixuanzhong star-special__defect" :style="{ width: getDefectWidth(score) }"></text>
		</view>
		<view class="star-txt">{{ score }}</view>
	</view>
</template>
<script>
export default {
	name: 'star',
	computed: {
		getDefectWidth(score) {
			return function(score) {
				return `${score.toString().split('.')[1] * 10}%`;
			};
		}
	},
	props: {
		score: {
			default: 0,
			type: Number
		}
	}
};
</script>
<style lang="less">
.star-wrap {
	display: flex;
	align-items: center;
	.star {
		font-size: 24rpx !important;
		margin-right: 8rpx;
		position: relative;
		&-special {
			&__defect {
				position: absolute;
				left: 0;
				font-size: 24rpx;
				top: 0;
				color: #fcd100 !important;
				overflow: hidden;
				display: inline-block;
			}
		}

		&.iconshoucang-yixuanzhong {
			color: #eeeeee;

			&.checked {
				color: #fcd100;
			}

			&.defect {
				width: 26rpx;
				height: 26rpx;
				display: inline-block;
				background: #eeeeee;
				position: relative;
				top: 5rpx;

				&::before {
					position: absolute;
					left: 0;
					top: 0;
					display: inline-block;
					content: '';
					height: 100%;
					width: 100%;
					background: url(../../../static/images/star.png);
					background-size: cover;
					z-index: 2;
				}

				.defect-tool {
					position: absolute;
					left: 0;
					top: 0;
					display: inline-block;
					height: 100%;
					background: #fcd100;
					z-index: 1;
				}
			}
		}
	}

	.star-txt {
		color: #fbd100;
		font-size: 24rpx !important;
		font-weight: 500;
		float: unset;
		padding-top: 2rpx;
	}
}
</style>
